<template>
  <div class="MyProducts">
    <a name="MyProducts"></a>
    <ContentTitle title="我的产品"></ContentTitle>
    <div class="MyProducts_content">
      <div class="content_item" v-for="(item, index) in imageList" :key="index">
        <div class="item">
          <img :src="item.url" alt="" />
          <div class="hintContent">
            <div class="hintInfo">
              <div class="hint">
                <div>{{ item.hintInfo.english }}</div>
                <div>{{ item.hintInfo.name }}</div>
              </div>
              <div class="ewm">
                <img
                  v-if="item.replaceContent.ewm"
                  :src="item.replaceContent.ewm"
                  alt=""
                />
                <a v-else :href="item.replaceContent.content">{{
                  item.replaceContent.content
                }}</a>
              </div>
            </div>
            <div class="hint_bottom">
              <div class="gainEwm">
                {{ item.hintInfo.hint }}
              </div>
              <!-- <div class="arrows"></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ContentTitle from "components/ContentTitle";

export default {
  name: "MyProducts",
  data() {
    return {
      imageList: [
        {
          url:
            "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/MyProducts1.png",
          hintInfo: {
            english: "GLOBE\nLOOKING  HOUSE",
            name: "地球找房（小程序）",
            hint:'打开微信扫码进入地球找房（小程序）'
          },
          replaceContent: {
            ewm: "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/dqzf.png",
            content: "https://www.baidu.com",
          },
        },
        {
          url:
            "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/MyProducts2.png",
          hintInfo: {
            english: "BROKER\nQUOTE",
            name: "经纪人帮帮（小程序）",
            hint:'打开微信扫码进入经纪人帮帮（小程序）'
          },
          replaceContent: {
            ewm: "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/jjrbb.png",
            content: "www.baidu.com",
          },
        },
        {
          url:
            "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/MyProducts3.png",
          hintInfo: {
            english: "DISTRIBUTOR\nHELPER",
            name: "渠道商助手（小程序）",
            hint:'打开微信扫码进入渠道商助手（小程序）'
          },
          replaceContent: {
            ewm: "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/qdd.png",
            content: "www.baidu.com",
          },
        },
        {
          url:
            "https://bucketosscjh.oss-cn-shenzhen.aliyuncs.com/blueDream/MyProducts4.png",
          hintInfo: {
            english: "DISTRIBUTOR\nPLFROMFORM",
            name: "渠道商管理平台",
            hint:'点击链接进入渠道商管理系统'
          },
          replaceContent: {
            ewm: "",
            content: "https://channel.diqiu666.com",
          },
        },
      ],
    };
  },
  components: {
    ContentTitle,
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.MyProducts {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 128.4rem;
  .contentTitle {
    margin-top: 17rem;
  }
  .MyProducts_content {
    margin-top: 7rem;
    // width: 100vw;
    width: 89.8rem;
    height: 103.4rem;
    position: relative;
    .content_item {
      position: absolute;
      .item {
        position: relative;
        img {
          width: 43rem;
          height: 43rem;
        }
        .hintContent {
          position: absolute;
          width: 36rem;
          height: 24rem;
          background-color: white;
          padding: 2rem;
          box-sizing: border-box;
          overflow: hidden;
          // &:hover .hintInfo {
          //   .ewm {
          //     transform: translateX(-100%);
          //     flex-shrink: 0;
          //   }
          // }
          .hintInfo {
            width: 100%;
            height: calc(100% - 4rem);
            border: 0.1rem black solid;
            font-size: 2rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            overflow: hidden;
            .hint {
              width: 100%;
              height: 16rem;
              padding: 3rem 2rem;
              box-sizing: border-box;
              flex-shrink: 0;
              div {
                white-space: pre;
              }
              & div:nth-of-type(2) {
                margin-top: 2rem;
              }
            }
            .ewm {
              width: 100%;
              height: 16rem;
              transition: all 0.3s;
              background-color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              // transform: translateX(0);
              transform: translateX(-100%);
              flex-shrink: 0;
              img {
                width: 14rem;
                height: 14rem;
              }
              a {
                line-height: 16rem;
                color: black;
                &:hover {
                  color: rgb(31, 31, 243);
                }
              }
            }
          }
          .hint_bottom {
            width: 100%;
            height: 4rem;
            padding: 0 2rem;
            background-color: #333333;
            color: white;
            line-height: 4rem;
            box-sizing: border-box;
            display: flex;
            font-size: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .arrows {
              width: 0;
              height: 0;
              border: 0.8rem white solid;
              border-left: 1.6rem white solid;
              border-right: 1.6rem white solid;
              border-color: transparent transparent transparent white;
              margin-right: -1.6rem;
            }
          }
        }
      }
    }
    /* 任何浏览器全局居中 */
    & .content_item:nth-of-type(1) {
      left: 1.9rem;
      .hintContent {
        top: 13rem;
        left: -23rem;
      }
    }
    & .content_item:nth-of-type(2) {
      right:0;
      top: 2.8rem;
      .hintContent {
        top: 13rem;
        right: -21.1rem;
      }
    }
    & .content_item:nth-of-type(3) {
      top: 45rem;
      .hintContent {
        top: 13rem;
        left: -21.2rem;
      }
    }
    & .content_item:nth-of-type(4) {
      top: 48.5rem;
     right: 0;
      .hintContent {
        top: 13rem;
        right: -21.1rem;
      }
    }
    /* 谷歌、360等居中 */
    // & .content_item:nth-of-type(1) {
    //   left: 53rem;
    //   .hintContent {
    //     top: 13rem;
    //     left: -23rem;
    //   }
    // }
    // & .content_item:nth-of-type(2) {
    //   left: 97rem;
    //   top: 2.8rem;
    //   .hintContent {
    //     top: 13rem;
    //     right: -21.1rem;
    //   }
    // }
    // & .content_item:nth-of-type(3) {
    //   left: 51.1rem;
    //   top: 45rem;
    //   .hintContent {
    //     top: 13rem;
    //     left: -21.2rem;
    //   }
    // }
    // & .content_item:nth-of-type(4) {
    //   top: 48.5rem;
    //   left: 97rem;
    //   .hintContent {
    //     top: 13rem;
    //     right: -21.1rem;
    //   }
    // }
  }
}
</style>
